<template>
  <div>
    <div class="top">
      <div v-for="(item,index) in topList1" :key="index">
        <span>{{item.label}}</span>
        <input
          v-model="form[item.key]"
          type="text"
          :maxlength="item.maxlength"
          :placeholder="item.placeholder"
        />
      </div>
      <div v-for="(item,index) in topList2" :key="index">
        <span>{{item.label}}</span>
        <input
          v-model="form[item.key]"
          type="password"
          :maxlength="item.maxlength"
          :placeholder="item.placeholder"
        />
      </div>
      <div v-for="(item,index) in topList3" :key="index">
        <span>{{item.label}}</span>
        <input
          v-model="form[item.key]"
          type="text"
          :maxlength="item.maxlength"
          :placeholder="item.placeholder"
        />
      </div>
    </div>

    <button class="btn" @click="voerClick">完成</button>
  </div>
</template>

<script>
import {} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {
        phone: '',
        username: '',
        newPassword: '',
        password: '',
        nickName: ''
      },
      topList1: [
        {
          label: '手机号码：',
          key: 'phone',
          maxlength: 11,
          placeholder: '请输入手机号码'
        },
        {
          label: '子账户名称：',
          key: 'username',
          maxlength: 10,
          placeholder: '字母或者数字,不超过10位'
        }
      ],
      topList2: [
        {
          label: '设置密码：',
          key: 'newPassword',
          maxlength: 16,
          placeholder: '请填写6-16位密码'
        },
        {
          label: '确认密码：',
          key: 'password',
          maxlength: 16,
          placeholder: '确认6-16位密码'
        }
      ],
      topList3: [
        {
          label: '设置昵称：',
          key: 'nickName',
          maxlength: 10,
          placeholder: '客服昵称,不超过10个字'
        }
      ]
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  onUnload () {
    this.$cookie.remove('newSonAdminForm')
  },
  methods: {
    voerClick () {
      const vm = this
      let cont = 0
      for (let key in vm.form) {
        if (vm.form[key]) {
          cont++
        }
      }
      if (cont < 5) {
        vm.$toast('请填写完整')
        return false
      } else if (
        vm.form.newPassword !== vm.form.password &&
        vm.form.password !== vm.form.newPassword
      ) {
        vm.$toast('两次密码不一致')
      }
      vm.$cookie.set('newSonAdminForm', vm.form)
      vm.$router.push(`/pages/mine/admin-manage/newSonAdmin/select/main`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.top {
  div {
    width: 90%;
    height: 60px;
    margin: auto;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      color: #666;
      width: 60%;
    }
  }
}
.btn {
  width: 95%;
  height: 45px;
  line-height: 45px;
  color: #ffffff;
  font-size: 14px;
  border-radius: 25px;
  background: #626efd;
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 0);
}
</style>
